<template>
    <div>
      <group>
        <!--<cell title="预约编号:" value="YY123654789"></cell>-->
        <!--<cell title="事项名称:" value="户口簿遗失补发"></cell>-->
        <!--<cell title="预约状态:" value="未受理"></cell>-->
        <!--<cell title="申报时间:" value="2017-06-15 14:50:30"></cell>-->
        <!--<cell title="预约时间:" value="2017-07-15 14:50:30"></cell>-->
        <!--<cell title="受理部门:" value="高新区边防派出所"></cell>-->
        <cell title="预约编号:" :value="dataContent.orderno"></cell>
        <cell title="事项名称:" :value="dataContent.orderMatName"></cell>
        <cell title="预约状态:" :value="dataContent.state"></cell>
        <cell title="申报时间:" :value="dataContent.creatordateB" ></cell>
        <cell title="预约时间:" :value="dataContent.orderDay"></cell>
        <cell title="受理部门:" :value="dataContent.orderDeptName"></cell>

      </group>
      <div v-transfer-dom>
        <loading v-model="loading" :text="loadingText" position="absolute"></loading>
      </div>
      <div class="btn-box" style="margin-top: 30px;">
        <x-button type="warn" v-show="IsCancel" @click.native="goCancel">撤销预约</x-button>
      </div>
    </div>
</template>
<script type="text/ecmascript-6">
  import { Cell,Group,XButton,Loading,Confirm,
    TransferDomDirective as TransferDom } from 'vux'

  import  { ConfirmPlugin } from 'vux'

  export default {
    data(){
      return {
        guid: this.$route.params.guid,
        dataContent:{
          orderno:'',
          orderMatName:'',
          state:'',
          creatordateB:'',
          orderDay:'',
          orderDeptName:''
        },
        IsCancel:false,
        loadingText: '正在撤销...',
        loading: false,
        show: false

      }
    },
    created(){
      this.initData();
    },
    methods:{
      initData(){

        let _self = this;
//        console.log(_self.guid);

        this.axios.get(global.baseApiUrl+'/reservation/myorder/'+_self.guid)
          .then(function (response) {
            //console.log(response.date);
            //返回数据写入到数据结构中
            _self.dataContent=response.data.data;
            if (_self.dataContent.state==0) {
              _self.IsCancel = true;
              _self.dataContent.state='已预约';
            }
            if (_self.dataContent.state==9) {
              _self.dataContent.state='已撤销';
            }
           _self.dataContent.creatordateB=_self.dataContent.creatordateB.split('.')[0];



          })
          .catch(function (response) {
            //报错打印错误信息
            console.log(response);
          });
      },

      goCancel () {
        let _self = this;

        this.$vux.confirm.show({
          content: '是否确定撤销预约？',
          onShow () {
//            console.log('plugin show')
          },
          onHide () {
//            console.log('plugin hide')
          },
          onCancel () {
//            console.log('plugin cancel')
          },
          onConfirm () {
//            console.log('plugin confirm')
            _self.loading = true;
            _self.axios.delete(global.baseApiUrl+'/reservation/myorder/'+_self.guid)
          .then(function (response) {
            if (response.data.succ) {
              _self.IsCancel = false;
              _self.dataContent.state = '已撤销';
            }
          })
          .catch(function (response) {
            //报错打印错误信息
            console.log(response);
          });
        setTimeout(function () {
          _self.loading = false;;
        }, 100)
          }
        })



//        _self.loading = true;
//        this.axios.delete(global.baseApiUrl+'/reservation/myorder/'+_self.guid)
//          .then(function (response) {
//            if (response.data.succ) {
//              _self.IsCancel = false;
//              _self.dataContent.state = '已撤销';
//            }
//          })
//          .catch(function (response) {
//            //报错打印错误信息
//            console.log(response);
//          });
//        setTimeout(function () {
//          _self.loading = false;;
//        }, 100)
      }
    },
    directives: {
      TransferDom
    },
    components:{
      XButton,
      Cell,
      Group,
      Loading,
      Confirm
    }
  }
</script>

